<template>
  <el-dialog v-model="visible" title="编辑资料" width="400px" :close-on-click-modal="false">
    <el-form :model="form" label-width="80px">
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-change="handleAvatarChange"
        >
          <el-avatar :src="form.avatar" size="large" />
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.location" />
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="form.tags" multiple placeholder="请选择标签" style="width: 100%">
          <el-option v-for="tag in tagOptions" :key="tag" :label="tag" :value="tag" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证正面">
        <el-upload
          class="id-uploader"
          :show-file-list="false"
          :before-upload="beforeIdUpload"
          :on-change="file => handleIdChange(file, 'idFront')"
        >
          <img v-if="form.idFront" :src="form.idFront" class="id-img" />
          <el-button v-else>上传图片</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证反面">
        <el-upload
          class="id-uploader"
          :show-file-list="false"
          :before-upload="beforeIdUpload"
          :on-change="file => handleIdChange(file, 'idBack')"
        >
          <img v-if="form.idBack" :src="form.idBack" class="id-img" />
          <el-button v-else>上传图片</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  user: Object
})
const emit = defineEmits(['update:modelValue', 'save'])

const visible = ref(props.modelValue)
watch(() => props.modelValue, v => visible.value = v)
watch(visible, v => emit('update:modelValue', v))

const form = ref({ ...props.user })
watch(() => props.user, (val) => {
  form.value = { ...val }
})

const tagOptions = [
  '正式工长', '内部工匠', '工程部/高级工程师', '外部工匠', '项目经理'
]

// 头像上传
function beforeAvatarUpload(file) {
  const isImg = file.type.startsWith('image/')
  if (!isImg) {
    window.ElMessage && window.ElMessage.error('只能上传图片文件')
  }
  return isImg
}
function handleAvatarChange(file) {
  const reader = new FileReader()
  reader.onload = e => {
    form.value.avatar = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 身份证上传
function beforeIdUpload(file) {
  const isImg = file.type.startsWith('image/')
  if (!isImg) {
    window.ElMessage && window.ElMessage.error('只能上传图片文件')
  }
  return isImg
}
function handleIdChange(file, key) {
  const reader = new FileReader()
  reader.onload = e => {
    form.value[key] = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

function onSave() {
  emit('save', { ...form.value })
  visible.value = false
}
function onCancel() {
  visible.value = false
}
</script>

<style scoped>
.avatar-uploader .el-avatar {
  cursor: pointer;
}
.id-uploader .id-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
}
</style> 